<script>
  import { AutoComplete, Todos,Counter,Greet,Button,Modal} from '@mitosis-demo/library-svelte';

  const handleClick = (event) => {
    alert('Button clicked!');
  };

  let showModal = false;
	const toggleModal = () => {
		showModal = !showModal;
    console.log("---"+showModal);
	};
</script>

<h1>Welcome to SvelteKit</h1>
<AutoComplete />
<Todos />
<Counter></Counter>
<Greet></Greet>
  <Button label="Primary Button" color="primary" onClick={handleClick} />
  <Button label="Secondary Button" color="secondary"/>
  <Button label="Danger Button" color="danger" />
  <Button label="Success Button" color="success" />
  <Button label="Warning Button" color="warning" />
  <Button label="Disabled Button" color="primary" disabled />
  <br/>

  <button on:click={toggleModal}>Show Modal</button>
  <Modal
	{showModal}
	backdropClass="modal-overlay"
	modalClass="modal-content"
  title="Modal Title"
	onClose={toggleModal}
>
	some message!
</Modal> 
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
